<template>
    <div id="myTab">
        <ul :style="{
            flexDirection: direction,
            height: height
        }">
            <li :class="current === i ? 'active' : ''" @click="tabChange(i, item.url)" v-for="(item, i) in tabs" :key="i">{{item.name}}</li>
        </ul>
    </div>
</template>

<script>
export default {
    name: '',
    props: {
        tabs: {
            type: Array,
            default: () => {
                return []
            }
        },

        direction: {
            type: String,
            default: 'row'
        }
    },
    data() { 
        return {
            height: '',
            current: 0
        }
    },
    created() {
        this.height = this.direction === "column" ? '100%' : '1.2rem'
    },
    methods:{
        tabChange(i, url) {
            this.current = i
            this.$router.push(url)
        }
    },
}
</script>

<style scoped lang="scss">
// 设计图是750的标准 也就是爱疯6  那其实相当于375px 
#myTab {
    width: 100%;
    font-size: .28rem;
    ul {
        display: flex;
        justify-content: space-around;
        align-items: center;
        li {
            line-height: .8rem;
        }
        .active {
            color: #e23033;
        }
    }
}
</style>